import React, { Component } from 'react'
// { Component }解构  
// 引入组件
import Three from './three'
const title='wyb'

export default class App extends Component {
    // 数据存储
    state={
        list:Array.from(Array(6),(_,i)=>{
            return {
                id:`CPU-${i}`,
                name:`男模-${i}`,
                temp:Math.ceil(Math.random()*100)
            }
        }),
        threeList:Array(9).fill('').map((_,i)=>{
            return{
                id:`${i}号选手`,
                name:`王${i}锤`,
                tc:`身高18${i}&腹肌${i}块`,
                price:`800${i}块`,
                }
        })

    }
    //  clickEvt() === clickEvt=function()
    clickEvt(item){
        console.log('你是猪')
        console.log(this)
        console.log(item)
        console.log(arguments)
        // setState方法，第一个参数是需要执行更新的state对象
        // setState的第二个参数为一个回调方法 -> 它是页面渲染后的一个回调，可以用它解决赋值异步问题
        this.setState({
           list:this.state.list.map(it=>{
               if(it.id===item.id) it.temp=100
               return it
           })
        })
    }
    clickEvt2(){
        console.log('你是猪a')
        console.log(this)
        console.log(arguments)
    }
    itemEvt(id){
        console.log(id)
        this.setState({
            threeList:this.state.threeList.map(item=>{
                if(item.id===id) item.price='今晚已有约'
           return item 
            })
        })
    }
    render() {
        // 定义一个节点变量
        var headNode=(
        <tr style={{width:'1000px',height:'30px'}}>
            <th  style={{width:'200px',height:'30px'}}>编号</th>
            <th>名字</th>
            <th>温度</th>
            <th>操作</th>
            <th>结果</th>
        </tr>
        )
    
    //    在react中，凡是数组数据绑定，必须给每一个对象添加一个key属性并且要唯一
               return (
            // jsx语法外部的所有注释和JS语法一致
            <div>
                {/* 在react的jsx语法中只有一个语法就是{}进行值绑定和注释，注释都是多行注释 */}
                <h1>{title}</h1>
                {/* jsx语法中，标签必须闭合 */}
                <hr/>
                <table  style={ {textAlign:'center'}}>
                    <thead>
                    {headNode}
                    </thead>
                    <tbody>
                    {/* {bodyList} */}
                    {/* 在react中的遍历渲染--就是JS数组遍历方法，map和reduce */}
                {
                 this.state.list.map(item=>{
                    //    圆括号代表是一个代码块
                       return(
                        <tr  key={item.id} style={{width:'1000px',height:'30px'} }>
                        <td style={{width:'200px',height:'30px'}}>{item.id}</td>
                        <td style={{width:'200px',height:'30px'}}>{item.name}</td>
                        <td style={{width:'200px',height:'30px'}}>
                        {item.temp < 30 ?<span  style={{color:'red' ,fontSize:'20px'}}>{item.temp}</span> :item.temp >60 ?<span  style={{color:'green' ,fontSize:'21px'}}>{item.temp}</span> :<span  style={{color:'orange' ,fontSize:'22px'}}>{item.temp}</span> }
                        </td>
                        {/* 样式要用驼峰命名 */}
                        {/* 条件渲染，也就是需要使用三目运算符,所有的事件都要改写为驼峰写法 */}
                        {/* 不能用funcion ，this会丢失，因为事件没有this，所以需要把this重指向，箭头函数 的this指向是render的this==》App实例 */}
                        <td style={{width:'200px',height:'30px'}}>{item.temp>60 && <button  onClick={
                        //   this.clickEvt()  会直接执行这个方法，相当于得到了这个值  所以正确的写法  this.clickEvt
                        // call和apply 是立即执行这个方法，并且把this的指向重指向
                        // bind 是不会立即执行这个方法，并执行this的重指向
                        this.clickEvt.bind(this,item)
                        }>处理</button> } </td>
                        <td style={{width:'200px',height:'30px'}} >
                            {item.temp  >60? <button onClick={this.clickEvt2.call(this,item) }>晋级</button>
                             : <button onClick={this.clickEvt2.call(this,item)}>淘汰</button>}
                        </td>
                    </tr> 
                       )
                   })
                }
                </tbody>
                </table>
                <hr/>
                <span style={{textAlign:'center' ,fontSize:'20px', width: "200px", height: "30px" ,display:'inline-block'}}>编号</span>
                <span style={{textAlign:'center' ,fontSize:'20px', width: "200px", height: "30px" ,display:'inline-block'}}>名字</span>
                <span style={{textAlign:'center' ,fontSize:'20px', width: "200px", height: "30px" ,display:'inline-block'}}>特长</span>
                <span style={{textAlign:'center' ,fontSize:'20px', width: "200px", height: "30px" ,display:'inline-block'}}>价格</span>
                <span style={{textAlign:'center' ,fontSize:'20px', width: "200px", height: "30px" ,display:'inline-block'}}>操作</span>
                {
                    this.state.threeList.map(it=>{
                        return(
                            //  {...it} 结构  id={it.id} name={it.name} tc={it.tc} price={it.price}==={...it}
                            // <Three key={it.id}  id={it.id} name={it.name} tc={it.tc} price={it.price}/>
                             <Three key={it.id}  {...it}  itemEvt={this.itemEvt.bind(this,it.id)}/>
                            //  组件传参数
                        )
                    })
                }
               
            </div>
        )
    }
}
